@import "default";

//客服中心总控定制版
.customer-service {
  .#{$steps-prefix-cls} {
    line-height: 1;
    font-family: Microsoft YaHei;
    .#{$steps-prefix-cls}-item {
      margin-right: 0;
      text-align: center;
      overflow: inherit;
      max-width: 110px;
      min-width: 110px;
      &:last-child {
        flex: auto;
      }
      .#{$steps-prefix-cls}-item-icon {
        border: 2px solid #052f55;
        width: 48px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        border-radius: 48px;
        font-size: 16px;
        margin: 0;
        > .#{$steps-prefix-cls}-icon {
          line-height: 1;
          top: -1px;
          color: #052f55;
          position: relative;
        }
      }
      .#{$steps-prefix-cls}-item-content {
        display: block;
        position: relative;
        margin-top: 3px;
        .#{$steps-prefix-cls}-item-title {
          font-size: 16px;
          color: #fff;
          display: inline-block;
          padding-right: 0;
          position: initial;
          line-height: 32px;
          margin: 0;
          &:after {
            width: 34px;
            height: 2px;
            background: #052f55;
            top: -28px;
            left: 85%;
          }
        }
        .#{$steps-prefix-cls}-item-description {
          font-size: 16px;
          color: #fff;
          max-width: inherit;
        }
      }
      &.#{$steps-prefix-cls}-next-error {
        .#{$steps-prefix-cls}-item-title {
          &:after {
            background: #f30203 !important;
          }
        }
      }
    }
    //.#{$steps-prefix-cls}-item-process {
    //  .#{$steps-prefix-cls}-item-icon {
    //    background: #f30203;
    //    border: 2px solid #f30203;
    //    > .#{$steps-prefix-cls}-icon {
    //      color: #000;
    //      font-size: 35px;
    //      line-height: 48px;
    //    }
    //  }
    //  .#{$steps-prefix-cls}-item-content {
    //    .#{$steps-prefix-cls}-item-title {
    //      color: #f30203;
    //    }
    //    .#{$steps-prefix-cls}-item-description {
    //      color: #f30203;
    //    }
    //  }
    //}
    .#{$steps-prefix-cls}-item-stringWait {
      .#{$steps-prefix-cls}-item-icon {
        background: #f30203;
        border: 1px solid #f30203;
        > .#{$steps-prefix-cls}-icon {
          color: #000;
          font-size: 18px;
          font-weight: 700;
          top: 6px;
        }
      }
      .#{$steps-prefix-cls}-item-content {
        .#{$steps-prefix-cls}-item-description {
          color: #f30203;
        }
        .#{$steps-prefix-cls}-item-title {
          color: #f30203;
          &:after {
            background: transparent;
          }
        }
      }
    }
    //.#{$steps-prefix-cls}-item-wait {
    //  .#{$steps-prefix-cls}-item-icon {
    //    background: transparent;
    //    border: 2px solid #052f55;
    //    > .#{$steps-prefix-cls}-icon {
    //      color: #052f55;
    //      font-size: 40px;
    //      line-height: 43px;
    //    }
    //  }
    //  .#{$steps-prefix-cls}-item-content {
    //    .#{$steps-prefix-cls}-item-title {
    //      color: #052f55;
    //      &:after {
    //        background: transparent;
    //      }
    //    }
    //    .#{$steps-prefix-cls}-item-description {
    //      color: #052f55;
    //    }
    //  }
    //}
    .#{$steps-prefix-cls}-item-finish {
      .#{$steps-prefix-cls}-item-icon {
        background: #07aff3;
        border: 1px solid #07aff3;
        > .#{$steps-prefix-cls}-icon {
          color: #000;
          font-size: 33px;
          line-height: 49px;
          font-weight: 700;
        }
      }
      .#{$steps-prefix-cls}-item-content {
        .#{$steps-prefix-cls}-item-title {
          &:after {
            background: #07aff3;
          }
        }
      }
    }
    //.#{$steps-prefix-cls}-item-string {
    //  .#{$steps-prefix-cls}-item-icon {
    //    background: #07aff3;
    //    border: 1px solid #07aff3;
    //    > .#{$steps-prefix-cls}-icon {
    //      color: #000;
    //      font-size: 18px;
    //      font-weight: 700;
    //      top: 6px;
    //    }
    //  }
    //  .#{$steps-prefix-cls}-item-content {
    //    .#{$steps-prefix-cls}-item-title {
    //      &:after {
    //        background: #07aff3;
    //      }
    //    }
    //  }
    //}
    .#{$steps-prefix-cls}-item-stringMore {
      .#{$steps-prefix-cls}-item-icon {
        background: #07aff3;
        border: 1px solid #07aff3;
        //width: 85px;
        width: 102px;
        line-height: 1;
        left: -20px;
        position: relative;
        white-space: normal;
        border-radius: 4px;
        > .#{$steps-prefix-cls}-icon {
          color: #000;
          font-size: 17px;
          font-weight: 700;
          top: 6px;
        }
      }
      .#{$steps-prefix-cls}-item-content {
        .#{$steps-prefix-cls}-item-title {
          &:after {
            background: #07aff3;
          }
        }
        .#{$steps-prefix-cls}-item-description {
          width: 102px;
          white-space: normal;
          left: -15px;
          position: absolute;
          top: 3px;
          line-height: 1.5;
        }
      }
    }
    .#{$steps-prefix-cls}-item-error {
      max-width: 65px;
      min-width: 65px;
      .#{$steps-prefix-cls}-item-icon {
        border: 0;
        height: 47px;
        width: 55px;
        line-height: 0;
        text-align: center;
        border-radius: 0;
        font-size: 0;
        background: url("assets/tmp/img/theme/stop.png") 0 0 / 100% 100% no-repeat;
        margin: 0;
      }
      .#{$steps-prefix-cls}-item-content {
        .#{$steps-prefix-cls}-item-title {
          color: #f30203;
        }
        .#{$steps-prefix-cls}-item-description {
          color: #f30203;
        }
      }
    }
  }
}

/* 客服总控返修鉴定步骤 */
.customer-control {
  .#{$steps-prefix-cls} {
    line-height: 1;
    font-family: Microsoft YaHei;
    .#{$steps-prefix-cls}-item {
      margin-right: 0;
      text-align: center;
      overflow: inherit;
      max-width: 100px;
      min-width: 100px;
      &:last-child {
        flex: auto;
      }
      .#{$steps-prefix-cls}-item-icon {
        border: 2px solid #052f55;
        width: 48px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        border-radius: 48px;
        font-size: 16px;
        margin: 0;
        > .#{$steps-prefix-cls}-icon {
          line-height: 1;
          top: -1px;
          color: #052f55;
          position: relative;
        }
      }
      .#{$steps-prefix-cls}-item-content {
        display: block;
        position: relative;
        margin-top: 3px;
        .#{$steps-prefix-cls}-item-title {
          font-size: 16px;
          color: #fff;
          display: inline-block;
          padding-right: 0;
          position: initial;
          line-height: 32px;
          margin: 0;
          &:after {
            width: 36px;
            height: 2px;
            background: #052f55;
            top: -28px;
            left: 82%;
          }
        }
        .#{$steps-prefix-cls}-item-description {
          font-size: 16px;
          color: #fff;
          max-width: inherit;
        }
      }
      &.#{$steps-prefix-cls}-next-error {
        .#{$steps-prefix-cls}-item-title {
          &:after {
            background: #f30203 !important;
          }
        }
      }
    }
    //.#{$steps-prefix-cls}-item-process {
    //  .#{$steps-prefix-cls}-item-icon {
    //    background: #f30203;
    //    border: 2px solid #f30203;
    //    > .#{$steps-prefix-cls}-icon {
    //      color: #000;
    //      font-size: 35px;
    //      line-height: 48px;
    //    }
    //  }
    //  .#{$steps-prefix-cls}-item-content {
    //    .#{$steps-prefix-cls}-item-title {
    //      color: #f30203;
    //    }
    //    .#{$steps-prefix-cls}-item-description {
    //      color: #f30203;
    //    }
    //  }
    //}
    //.#{$steps-prefix-cls}-item-wait {
    //  .#{$steps-prefix-cls}-item-icon {
    //    background: transparent;
    //    border: 2px solid #052f55;
    //    > .#{$steps-prefix-cls}-icon {
    //      color: #052f55;
    //      font-size: 40px;
    //      line-height: 43px;
    //    }
    //  }
    //  .#{$steps-prefix-cls}-item-content {
    //    .#{$steps-prefix-cls}-item-title {
    //      color: #052f55;
    //      &:after {
    //        background: transparent;
    //      }
    //    }
    //    .#{$steps-prefix-cls}-item-description {
    //      color: #052f55;
    //    }
    //  }
    //}
    //.#{$steps-prefix-cls}-item-finish {
    //  .#{$steps-prefix-cls}-item-icon {
    //    background: #07aff3;
    //    border: 1px solid #07aff3;
    //    > .#{$steps-prefix-cls}-icon {
    //      color: #000;
    //      font-size: 33px;
    //      line-height: 49px;
    //      font-weight: 700;
    //    }
    //  }
    //  .#{$steps-prefix-cls}-item-content {
    //    .#{$steps-prefix-cls}-item-title {
    //      &:after {
    //        background: #07aff3;
    //      }
    //    }
    //  }
    //}
    .#{$steps-prefix-cls}-item-string {
      .#{$steps-prefix-cls}-item-icon {
        background: #f30203;
        border: 1px solid #f30203;
        > .#{$steps-prefix-cls}-icon {
          color: #000;
          font-size: 18px;
          font-weight: 700;
          top: 6px;
        }
      }
      .#{$steps-prefix-cls}-item-content {
        .#{$steps-prefix-cls}-item-title {
          &:after {
            background: #07aff3;
          }
        }
      }
    }
    .#{$steps-prefix-cls}-item-stringMore {
      .#{$steps-prefix-cls}-item-icon {
        background: #07aff3;
        border: 1px solid #07aff3;
        > .#{$steps-prefix-cls}-icon {
          color: #000;
          font-size: 18px;
          font-weight: 700;
          top: 6px;
        }
      }
      .#{$steps-prefix-cls}-item-content {
        .#{$steps-prefix-cls}-item-title {
          &:after {
            background: #07aff3;
          }
        }
      }
    }

    //.#{$steps-prefix-cls}-item-error {
    //  .#{$steps-prefix-cls}-item-icon {
    //    background: #f30203;
    //    border: 2px solid #f30203;
    //    > .#{$steps-prefix-cls}-icon {
    //      color: #000;
    //      font-size: 35px;
    //      line-height: 48px;
    //    }
    //  }
    //  .#{$steps-prefix-cls}-item-content {
    //    .#{$steps-prefix-cls}-item-title {
    //      color: #f30203;
    //    }
    //    .#{$steps-prefix-cls}-item-description {
    //      color: #f30203;
    //    }
    //  }
    //}
  }

}

//车辆总控定制版
.customer-car {
  .#{$steps-prefix-cls} {
    line-height: 1;
    font-family: Microsoft YaHei;
    .#{$steps-prefix-cls}-item {
      margin-right: 0;
      text-align: center;
      overflow: inherit;
      max-width: 155px;
      min-width: 155px;
      .#{$steps-prefix-cls}-item-icon {
        border: 2px solid #052f55;
        width: 48px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        border-radius: 48px;
        font-size: 16px;
        margin: 0;
        > .#{$steps-prefix-cls}-icon {
          line-height: 1;
          top: 4px;
          color: #052f55;
          position: relative;
          display: block;
          > span {
            height: 35px;
            font-weight: 700;
          }
        }
      }
      .#{$steps-prefix-cls}-item-content {
        display: block;
        position: relative;
        margin-top: 3px;
        .#{$steps-prefix-cls}-item-title {
          font-size: 16px;
          color: #fff;
          display: inline-block;
          padding-right: 0;
          position: initial;
          line-height: 32px;
          margin: 0;
          &:after {
            width: 70px;
            height: 2px;
            background: #052f55;
            top: -28px;
            left: 80%;
          }
        }
        .#{$steps-prefix-cls}-item-description {
          font-size: 16px;
          color: #fff;
          max-width: inherit;
          position: absolute;
          top: -47px;
          left: 137px;
        }
      }
    }
    .#{$steps-prefix-cls}-item-stringProcess {
      .#{$steps-prefix-cls}-item-icon {
        background: #f30203;
        border: 2px solid #f30203;
        > .#{$steps-prefix-cls}-icon {
          color: #000;
        }
      }
      .#{$steps-prefix-cls}-item-content {
        .#{$steps-prefix-cls}-item-title {
          color: #f30203;
          &:after {
            background: #f30203;
          }
        }
        .#{$steps-prefix-cls}-item-description {
          color: #f30203;
        }
      }
    }
    .#{$steps-prefix-cls}-item-stringWait {
      .#{$steps-prefix-cls}-item-icon {
        background: transparent;
        border: 2px solid #07aff3;
        > .#{$steps-prefix-cls}-icon {
          color: #07aff3;
        }
      }
      .#{$steps-prefix-cls}-item-content {
        .#{$steps-prefix-cls}-item-title {
          color: #07aff3;
          &:after {
            background: #052f55;
          }
        }
      }
    }
    .#{$steps-prefix-cls}-item-string {
      .#{$steps-prefix-cls}-item-icon {
        background: #07aff3;
        border: 1px solid #07aff3;
        > .#{$steps-prefix-cls}-icon {
          color: #000;
        }
      }
      .#{$steps-prefix-cls}-item-content {
        .#{$steps-prefix-cls}-item-title {
          &:after {
            background: #07aff3;
          }
        }
      }
    }
  }
}


@media (max-width:1900px) {
  .customer-service {
    .#{$steps-prefix-cls} {
      .#{$steps-prefix-cls}-item { max-width: 85px; min-width: 85px;
        .#{$steps-prefix-cls}-item-icon {
          width: 43px;
          height: 43px;
          line-height: 43px;
          border-radius: 43px;
          font-size: 15px;
        }
        .#{$steps-prefix-cls}-item-content {
          .#{$steps-prefix-cls}-item-title {font-size: 14px;line-height: 24px;
            &:after {width: 30px;left: 83%;}
          }
          .#{$steps-prefix-cls}-item-description {font-size: 14px;}
        }
      }
      .#{$steps-prefix-cls}-item-stringWait {
        .#{$steps-prefix-cls}-item-icon {
          > .#{$steps-prefix-cls}-icon {font-size: 16px;}
        }
        .#{$steps-prefix-cls}-item-content {
          .#{$steps-prefix-cls}-item-title {min-width: 90px;}
        }
      }
      .#{$steps-prefix-cls}-item-finish {
        .#{$steps-prefix-cls}-item-icon {
          > .#{$steps-prefix-cls}-icon {font-size: 25px;}
        }
      }
      .#{$steps-prefix-cls}-item-stringMore {
        .#{$steps-prefix-cls}-item-icon {width: 85px;border-radius: 4px;
          > .#{$steps-prefix-cls}-icon {font-size: 15px;top: 4px;}
        }
      }
      .#{$steps-prefix-cls}-item-error {max-width: 65px;min-width: 65px;
        .#{$steps-prefix-cls}-item-icon {height: 43px;width: 50px; border-radius: 0 ;}
      }
    }
  }

  .customer-control {
    .#{$steps-prefix-cls} {
      .#{$steps-prefix-cls}-item {max-width: 85px;min-width: 85px;
        .#{$steps-prefix-cls}-item-icon {width: 43px;height: 43px;line-height: 43px;border-radius: 43px;font-size: 14px;}
        .#{$steps-prefix-cls}-item-content {
          .#{$steps-prefix-cls}-item-title {font-size: 14px;line-height: 23px;
            &:after {width: 31px;}
          }
          .#{$steps-prefix-cls}-item-description {font-size: 14px;}
        }
      }
      .#{$steps-prefix-cls}-item-string {
        .#{$steps-prefix-cls}-item-icon {
          > .#{$steps-prefix-cls}-icon {font-size: 16px;top: 4px;}
        }
      }
      .#{$steps-prefix-cls}-item-stringMore {
        .#{$steps-prefix-cls}-item-icon {
          > .#{$steps-prefix-cls}-icon {font-size: 16px;top: 4px;}
        }
        .#{$steps-prefix-cls}-item-content {
          .#{$steps-prefix-cls}-item-title {min-width: 85px;}
        }
      }
    }

  }
}
